<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul {
            list-style: none;
            position: absolute;
            top: 100px;
            left: 300px;
            -webkit-transform-style: preserve-3d;
            perspective: 0px;
            perspective-origin: 50% 100px;
            transform: rotateX(-20deg)  rotateY(-30deg) rotateZ(20deg);
        }
        li{
            width: 200px;
            height: 200px;
            position: absolute;
            background: rgba(0,255,0,0.1);
            border: 1px solid green;
            text-align: center;
            line-height: 200px;
            font-size:20px;
        }
        /*前后面*/
        li:nth-child(1){
            transform: translateZ(100px);
        }
        li:nth-of-type(6){
            transform: translateZ(-100px);
        }
        /*上下面*/
        li:nth-of-type(2){
            transform: rotateX(90deg) translateZ(100px);
        }

        li:nth-of-type(3){
            transform: rotateX(90deg) translateZ(-100px);
        }
        /*左右面*/
        li:nth-of-type(4){
            transform: rotateY(90deg) translateZ(100px);
        }
        li:nth-of-type(5){
            transform: rotateY(90deg) translateZ(-100px);
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>